<!-- 新建文件夹 -->
<template>
  <button
    type="button"
    class="btn btn-secondary button-css button-font"
    @click="showDialog = true"
  >
    <i class="bi bi-plus m-1"></i>新建文件夹
  </button>

  <!-- 弹出框 -->
  <div class="modal" v-if="showDialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">新建文件夹</h5>
          <button
            type="button"
            class="close"
            style="border: 0px"
            aria-label="Close"
            @click="closeDialog"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input
            type="text"
            class="form-control button-font"
            v-model="folderName"
            placeholder="请输入文件夹名称"
          />
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary button-font"
            @click="closeDialog"
          >
            取消
          </button>
          <button
            type="button"
            class="btn btn-primary button-font"
            @click="createFolder"
          >
            创建
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */
import axios from "axios";
import { mapGetters } from "vuex"; // 引入mapGetters辅助函数

export default {
  data() {
    return {
      showDialog: false,
      folderName: "",
    };
  },
  computed: {
    // 使用mapGetters辅助函数映射Vuex getter到组件的computed属性
    ...mapGetters(["getParentFolderId"]),
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
      this.folderName = ""; // 清空输入框
    },
    async createFolder() {
      // 在这里使用computed属性getParentFolderId来获取parentFolderId
      const parentId = this.getParentFolderId; // 注意这里获取的是getter函数，所以调用它
      try {
        const response = await axios.post("/api/createFolders", {
          folder_name: this.folderName,
          // 直接使用计算属性的值
          parent_folder_id: this.getParentFolderId,
        });

        if (response.status === 200) {
          this.closeDialog();
          alert("文件夹创建成功！");
          // 刷新页面
          setTimeout(function () {
            //1秒后执行刷新
            window.location.reload();
          }, 2000); //单位是毫秒
        } else {
          alert("文件夹创建失败！");
        }
      } catch (error) {
        if (error.response && error.response.status === 409) {
          alert("具有相同名称的文件夹已存在！");
        } else {
          alert("创建文件夹时发生错误！");
          console.error(error);
        }
      }
    },
    created() {
      // 这里可以打印出parentFolderId的值来检查是否正确获取
      console.log(this.getParentFolderId());
      // 注意：通常不需要在created钩子中设置data属性，因为computed属性已经足够响应式
    },
  },
};
</script>

<style scoped>
/* 弹出框的样式，这里只是简单的示例，你可以根据需要自定义 */
.modal {
  display: block; /* 默认情况下不显示，通过v-if控制 */
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog {
  margin-top: 10%;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* 你可以在这里添加额外的样式 */
.button-css {
  border-radius: 1;
  background-color: #4dd799;
  border: 0;
}
.button-font {
  /* 按钮字体大小 */
  font-size: 10px;
  font-weight: 500;
}
</style>
